<template>
  <div>
    <div class="content mb-50">
      <!--轮播图-->
      <div class="swipe-wrap">
        <div class="home-top">
          <img src="./images/location-white.svg" alt="logo" class="logo">
          <router-link to="/choose_positon">
            <span class="city">合肥市</span>
          </router-link>
          <div class="search-wrap">
            <router-link to="/search">
              <span class="search">输入你要搜索的商品</span>
            </router-link>
          </div>
        </div>
        <mt-swipe :auto="4000">
          <!--<mt-swipe-item v-for="ad in adList" :key="ad.id">-->
          <!--<div class="img-box" :style="{background: 'url(' + url+ad.companyImg + ') center center',backgroundSize:'cover',backgroundRepeat:'no-repeat'}"></div>-->
          <!--&lt;!&ndash;<img :src="url+ad.companyImg" >&ndash;&gt;-->
          <!--</mt-swipe-item>-->
          <mt-swipe-item>
            <!--<router-link :to="{ path: '/gongsi/', query: {  'id':2 }}">-->
            <img src="./images/bg.jpg">
            <!--</router-link>-->
          </mt-swipe-item>
          <mt-swipe-item>
            <!--<router-link :to="{ path: '/gongsi/', query: {  'id':1 }}">-->
            <img src="./images/bg1.jpg">
            <!--</router-link>-->
          </mt-swipe-item>
        </mt-swipe>
      </div>
      <!--五个分类-->
      <ul class="index-link">
        <li>
          <img src="./images/jiu-icon.svg"> <span>白酒</span>
        </li>
        <li>
          <!--<router-link to="/local">-->
          <img src="./images/jiu-icon1.svg"> <span>红酒</span>
          <!--</router-link>-->
        </li>
        <li>
          <img src="./images/jiu-icon2.svg"> <span>啤酒</span>
        </li>

        <li>
          <img src="./images/jiu-icon3.svg"> <span>保健酒</span>
        </li>
        <li>
          <img src="./images/jiu-icon4.svg"> <span>饮料</span>
        </li>
      </ul>
      <!--活动通知-->
      <div class="ac-notify">
        <span>活动通知</span>
        <marquee align="left" behavior="scroll">春茶预售，百万现金优惠限时开始，最高立减5000元</marquee>
      </div>
      <!--爆品秒杀-->
      <div class="seckill">
        <div class="my-title">
          <span><img src="./images/bpms-icon.svg">爆品秒杀</span>
        </div>
        <div class="div-timer">
          <div class="timer">
            <span>距结束仅剩</span>
            <count-down class="fl" v-on:start_callback="countDownS_cb()" v-on:end_callback="countDownE_cb()"
                        :currentTime="currentTime" :startTime="startTime" :endTime="endTime" :hourTxt="':'"
                        :minutesTxt="':'" :secondsTxt="''"></count-down>
          </div>
          <router-link to="/seckill_list">
          <div class="see-more">查看更多 > </div>
          </router-link>
        </div>
        <div>
          <div class="seckill-pro">
            <ul class="seckill-list">
              <li class="fl">
                <div class="fl">
                  <img src="./images/mx.png">
                </div>
                <div class="info">
                  <div class="name">52°郎酒高纯度高为100%</div>
                  <div class="price"><span>¥1499</span> <span> <del>¥1599</del></span></div>
                  <div class="buynow">立即抢购</div>
                </div>
              </li>
              <li class="fl">
                <div class="fl">
                  <img src="./images/mx.png">
                </div>
                <div class="info">
                  <div class="name">52°郎酒高纯度高为100%</div>
                  <div class="price"><span>¥1499</span> <span> <del>¥1599</del></span></div>
                  <div class="buynow">立即抢购</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!--活动图片-->
      <div class="activity-img">
        <img src="./images/act.png" alt="">
      </div>
      <!--预售活动-->
      <div class="willsale">
        <router-link to="/willsale_list">
          <div class="my-title2">
            <span><img src="./images/yshd-icon.svg">预售活动</span>
            <span class="see-more">查看更多 > </span>
          </div>
        </router-link>
        <div class="my-div">
          <ul class="coupon-list">
            <li>
              <div class="c-left">
                <div><img src="./images/mx.png"></div>
              </div>
              <div class="c-mid">
                <h2>郎酒新品预售抵扣券</h2>
                <div class="price">59抵100元券</div>
                <div class="startsale">4月28开售</div>
              </div>
              <div class="c-right">
                <span class="jindu">已抢80%</span>
                <progress value="30" max="100" class="pro-wh"></progress>
                <!--<mt-progress class="progre" :value="20" :bar-height="5"></mt-progress>-->
                <span class="getcoupon">立即领券</span>
              </div>
              <div class="line"></div>
            </li>

          </ul>
        </div>
      </div>
      <!--预售活动-->
      <div class="willsale mt-10">
        <div class="my-title2">
          <span><img src="./images/pintuan-icon.svg">名酒拼团</span>
          <span class="see-more"><router-link to="/grouplist">更多拼团 > </router-link></span>
        </div>
        <ul class="group-list">
          <li>
            <div class="c-left2"><img src="./images/goods.png"></div>
            <div class="c-right2">
              <div class="goods-name">52°52°郎酒高纯度500ml*6包邮配送*6</div>
              <div class="clearfix">
                <div class="fl">
                  <div class="goods-guige"><span>99人团</span> <span>¥199.00</span></div>
                  <div class="old-price">
                    <del>单买价：¥219.00</del>
                  </div>
                </div>
                <div class="fl go-group">
                  去开团

                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <!--白酒专区-->
      <div class="bg-fff mt-10">
        <div class="zhuanqu-title"><img src="./images/titile1-1.svg" alt=""></div>
        <div class="zhuanqu-style2" style="display: none">
          <div class="my-style2"><img src="./images/goods.png" alt=""></div>
          <div class="con1">
            <div>郎酒品牌特卖</div>
            <div>神采飞扬中国邮</div>
            <div>5折起购</div>
          </div>
        </div>
        <div class="clearfix one">
          <div class="zhuanqu1">
            <div class="con1">
              <div>郎酒品牌特卖</div>
              <div>神采飞扬中国邮</div>
              <div>5折起购</div>
            </div>
            <div class="img1">
              <img src="./images/goods.png" alt="">
            </div>

          </div>
          <div class="zhuanqu2">
            <div>醉美徽州</div>
            <div>地产好酒一应俱全</div>
            <div><img src="./images/goods.png" alt=""></div>
          </div>
        </div>
        <div class="one clearfix">
          <div class="zhuanqu3">
            <div>醉美徽州</div>
            <div>地产好酒一应俱全</div>
            <div><img src="./images/goods.png" alt=""></div>
          </div>
          <div class="zhuanqu3">
            <div>醉美徽州</div>
            <div>地产好酒一应俱全</div>
            <div><img src="./images/goods.png" alt=""></div>
          </div>
          <div class="zhuanqu3">
            <div>醉美徽州</div>
            <div>地产好酒一应俱全</div>
            <div><img src="./images/goods.png" alt=""></div>
          </div>
        </div>
        <ul class="clearfix two">
          <li><img src="./images/img.png" alt=""></li>
          <li><img src="./images/img.png" alt=""></li>
          <li><img src="./images/img.png" alt=""></li>
          <li><img src="./images/img.png" alt=""></li>
          <li><img src="./images/img.png" alt=""></li>
        </ul>
      </div>
      <!--葡萄酒专区-->
      <div class="bg-fff mt-10">
        <div class="zhuanqu-title"><img src="./images/titile1-2.svg" alt=""></div>
        <div class="zhuanqu-style2" style="display: none">
          <div class="my-style2"><img src="./images/goods.png" alt=""></div>
          <div class="con1">
            <div>郎酒品牌特卖</div>
            <div>神采飞扬中国邮</div>
            <div>5折起购</div>
          </div>
        </div>
        <div class="clearfix one">
          <div class="zhuanqu1">
            <div class="con1">
              <div>郎酒品牌特卖</div>
              <div>神采飞扬中国邮</div>
              <div>5折起购</div>
            </div>
            <div class="img1">
              <img src="./images/goods.png" alt="">
            </div>

          </div>
          <div class="zhuanqu2">
            <div>醉美徽州</div>
            <div>地产好酒一应俱全</div>
            <div><img src="./images/goods.png" alt=""></div>
          </div>
        </div>
        <div class="one clearfix">
          <div class="zhuanqu3">
            <div>醉美徽州</div>
            <div>地产好酒一应俱全</div>
            <div><img src="./images/goods.png" alt=""></div>
          </div>
          <div class="zhuanqu3">
            <div>醉美徽州</div>
            <div>地产好酒一应俱全</div>
            <div><img src="./images/goods.png" alt=""></div>
          </div>
          <div class="zhuanqu3">
            <div>醉美徽州</div>
            <div>地产好酒一应俱全</div>
            <div><img src="./images/goods.png" alt=""></div>
          </div>
        </div>
        <ul class="clearfix two">
          <li><img src="./images/img.png" alt=""></li>
          <li><img src="./images/img.png" alt=""></li>
          <li><img src="./images/img.png" alt=""></li>
          <li><img src="./images/img.png" alt=""></li>
          <li><img src="./images/img.png" alt=""></li>
        </ul>
      </div>
      <!--黄保啤综合区-->
      <div class="bg-fff mt-10">
        <div class="zhuanqu-title"><img src="./images/titile1-3.svg" alt=""></div>
        <div class="zhuanqu-style2" style="display: none">
          <div class="my-style2"><img src="./images/goods.png" alt=""></div>
          <div class="con1">
            <div>郎酒品牌特卖</div>
            <div>神采飞扬中国邮</div>
            <div>5折起购</div>
          </div>
        </div>
        <div class="clearfix one">
          <div class="zhuanqu1">
            <div class="con1">
              <div>郎酒品牌特卖</div>
              <div>神采飞扬中国邮</div>
              <div>5折起购</div>
            </div>
            <div class="img1">
              <img src="./images/goods.png" alt="">
            </div>

          </div>
          <div class="zhuanqu2">
            <div>醉美徽州</div>
            <div>地产好酒一应俱全</div>
            <div><img src="./images/goods.png" alt=""></div>
          </div>
        </div>
        <div class="one clearfix">
          <div class="zhuanqu3">
            <div>醉美徽州</div>
            <div>地产好酒一应俱全</div>
            <div><img src="./images/goods.png" alt=""></div>
          </div>
          <div class="zhuanqu3">
            <div>醉美徽州</div>
            <div>地产好酒一应俱全</div>
            <div><img src="./images/goods.png" alt=""></div>
          </div>
          <div class="zhuanqu3">
            <div>醉美徽州</div>
            <div>地产好酒一应俱全</div>
            <div><img src="./images/goods.png" alt=""></div>
          </div>
        </div>
        <ul class="clearfix two">
          <li><img src="./images/img.png" alt=""></li>
          <li><img src="./images/img.png" alt=""></li>
          <li><img src="./images/img.png" alt=""></li>
          <li><img src="./images/img.png" alt=""></li>
          <li><img src="./images/img.png" alt=""></li>
        </ul>
      </div>
      <div class="mt-10">
        <ul id="myUl" class="bg-fff my-tab">
          <li @click="choose1">热销推荐</li>
          <li @click="choose2">猜你喜欢</li>
        </ul>
        <ul class="wntj-list">
          <li>
            <div>
              <div class="pro-img"><img src="./images/goods.png"></div>
              <div class="pro-desc">53°茅台王子酒500ml*6茅台王子酒500ml</div>
            </div>
            <div class="price-wrap">
              <span class="price1">199.00</span>
            </div>
          </li>
          <li>
            <div>
              <div class="pro-img"><img src="./images/goods.png"></div>
              <div class="pro-desc">53°茅台王子酒500ml*6</div>
            </div>
            <div class="price-wrap">
              <span class="price1">199.00</span>
            </div>
          </li>
        </ul>
      </div>
    </div>

  </div>

</template>

<script>
  import Vue from 'vue'
  import {Swipe, SwipeItem} from 'mint-ui';
  import CountDown from '@/components/home/vue2-countdown'
  Vue.component(Swipe.name, Swipe);
  Vue.component(SwipeItem.name, SwipeItem);
  export default {
    components: {
      'count-down': CountDown,
    },
    data(){
      return {
        startTime: 1527747841000,
        endTime: 1527850000000,
        currentTime: 0,
      };
    },
    mounted(){

    },
    methods: {
      countDownE_cb(){
        console.log('end');
      },
      countDownS_cb(){
        console.log('start');
      },
      choose1(){
        var oUl = document.getElementById("myUl");
        oUl.className = "my-tab";
      },
      choose2(){
        var oUl = document.getElementById("myUl");
        oUl.className = "my-tab2";
      }
    },
    filters: {}
  }
</script>


<style scoped>

  .pro-wh {
    width: 94%;
    height: .25rem;
    margin-bottom: .2rem;
  }

  progress {
    background-color: #ececec;
  }

  progress::-webkit-progress-bar {
    background-color: #ececec;
  }

  progress::-webkit-progress-value {
    background-color: #F74C4E;
  }

  .content {
    text-align: center;
  }

  .home-top {
    width: 100%;
    height: 2.2rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    background-color: transparent;
    transition: all 1s;
    /*background-color:#e80013;*/
  }

  .city {
    position: relative;
    top: .6rem;
    left: .25rem;
    font-size: .65rem;
    color: #fff;
  }

  .logo {
    margin: .5rem 0 .5rem .75rem;
  }

  .search-wrap {
    margin: .4rem .75rem .4rem .5rem;
    flex: 1;
    height: 1.5rem;
    border-radius: 1.5rem;
    position: relative;
    background: rgba(255, 255, 255, .3) .3rem center no-repeat;
  }

  .search {
    height: 1.5rem;
    line-height: 1.5rem;
    width: 100%;
    font-size: .6rem;
    color: #343434;
    display: inline-block;
    text-align: center;
    background: url("./images/search-black-icon.svg") 22% no-repeat;
  }

  .swipe-wrap {
    width: 100%;
    height: 9rem;
    background-color: #eee;
    overflow: hidden;
  }

  .mint-swipe-items-wrap img {
    width: 100%;
  }

  .index-link {
    width: 100%;
    overflow: hidden;
    padding: 0.25rem .5rem .5rem;
    background: #fff;
  }

  .index-link li {
    float: left;
    width: 20%;
    text-align: center;
    font-size: .6rem;
    color: #1e3751;
  }

  .index-link a {
    color: #1e3751;
  }

  .index-link li span {
    display: block;
    line-height: 1;
  }

  .ac-notify {
    height: 1.5rem;
    margin: .5rem .75rem;
    clear: both;
  }

  .ac-notify span {
    float: left;
    width: 20%;
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: .6rem;
    color: #fff;
    background: url("./images/hd-bg.svg") no-repeat;
  }

  .ac-notify marquee {
    float: left;
    width: 80%;
    height: 1.5rem;
    line-height: 1.5rem;
    background-color: #fff;
    border-bottom-right-radius: 10rem;
    border-top-right-radius: 10rem;
    font-size: .6rem;
    color: #555555;
  }

  .seckill {
    height: 9rem;
    background: #fff;
    /*padding: 0 .5rem;*/
  }

  .my-title {
    font-size: .8rem;
    color: #555555;
    font-weight: bold;
    padding: .5rem .25rem;
    border-bottom: 1px solid #f7f7f7;
  }

  .my-title img {
    width: 1rem;
    vertical-align: middle;
    margin-right: .5rem;
    margin-bottom: .25rem;
  }

  .div-timer {
    clear: both;
    margin: .6rem .5rem 0;
  }

  .timer {
    float: left;
    clear: both;
    font-size: .6rem;
    color: #555555;
  }

  .timer span {
    float: left;
    margin-right: .5rem;
    margin-top: .1rem;
  }

  .see-more {
    float: right;
    font-size: .6rem;
    color: #777777;
  }

  .seckill-pro {
    width: 100%;
    height: 5.8rem;
    padding-top: .75rem;
    overflow-y: hidden;
    overflow-x: scroll;
  }

  .seckill-list {
    width: 300rem;
  }

  .seckill-list li {
    overflow: hidden;
    border-right: 1px solid #f3f3f3;
  }

  .seckill-list li:last-child {
    overflow: hidden;
    border: none;
  }

  .seckill-list li img {
    margin-left: .5rem;
    width: 4rem;
    height: 4rem;
  }

  .seckill-list li .info {
    float: left;
    margin: 0 .5rem;
  }

  .seckill-list li .name {
    width: 6rem;
    font-size: .7rem;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .seckill-list li .price {
    margin-top: .25rem;
    text-align: left;
  }

  .seckill-list li .price span:first-child {
    font-size: .65rem;
    color: #F74C4E;
  }

  .seckill-list li .price span:last-child {
    font-size: .5rem;
    color: #999;
    margin-left: .25rem;
  }

  .seckill-list li .buynow {
    width: 3.5rem;
    font-size: .55rem;
    padding: .2rem 0;
    color: #fff;
    background: #E93B3D;
    border-radius: 100px;
    margin-top: .25rem;
  }

  .activity-img {
    margin: .5rem 0;
  }

  .my-title2 {
    font-size: .8rem;
    color: #555555;
    font-weight: bold;
    padding: .5rem .25rem;
    border-bottom: 1px solid #f7f7f7;
  }

  .my-title2 img {
    width: 1rem;
    vertical-align: middle;
    margin-right: .5rem;
    margin-bottom: .25rem;
  }

  .my-title2 span:first-child {
    padding-left: 3.75rem;
  }

  .willsale {
    background: #fff;
    clear: both;
  }

  .willsale .see-more {
    float: right;
    font-size: .6rem;
    color: #777777;
    margin-top: .25rem;
    margin-right: .75rem;
  }
  .willsale .see-more a{ color: #777777;}
  .my-div {
    padding-bottom: .5rem;
  }

  .coupon-list {
    text-align: left;
    margin: .5rem;
    overflow: hidden;
  }

  .coupon-list li {
    height: 5rem;
    width: 100%;
    background: #fff;
    padding: 10px;
    /*margin-bottom:.5rem;*/
    position: relative;
    display: flex;
    border-radius: 1px;
    border: 1px solid #eee;
  }

  .c-left {
    /*width:24%;*/
    /*float:left;*/
    text-align: center;
    width: 4rem;
  }

  .c-left div {
    display: inline-block;
    width: 4rem;
    height: 4rem;
    /*background:url(images/imgbg.svg) 0 0 no-repeat;*/
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
  }

  .c-left img {
    width: 100%;
  }

  .c-mid {
    padding-left: .4rem;
    padding-right: .4rem;
    flex: 1;
  }

  .c-mid h2 {
    font-weight: normal;
    font-size: .75rem;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .c-mid .price {
    font-size: .7rem;
    color: #E93B3D;
    margin-top: 1rem;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .c-mid .startsale {
    font-size: .5rem;
    color: #777;
  }

  .c-right {
    width: 4.5rem;
  }

  .jindu {
    font-size: .6rem;
    color: #777;
  }

  /*progress {*/
  /*width: 100%;*/
  /*height: .2rem;*/
  /*margin: .5rem 0;*/
  /*}*/

  .getcoupon {
    font-size: .55rem;
    margin-top: .75rem;
    padding: .25rem .75rem;
    color: #fff;
    background: #E93B3D;
    border-radius: 100px;
  }

  .line {
    position: absolute;
    width: 0;
    height: 100%;
    border-left: 1px dashed #eee;
    right: 5.5rem;
    top: 0;
  }

  .line:before {
    content: '';
    width: 12px;
    height: 12px;
    background: #fff;
    border: 1px solid #eee;
    transform: rotate(-135deg);
    border-bottom: 0;
    position: absolute;
    top: -7px;
    left: -8px;
    z-index: 2;
  }

  .line:after {
    content: '';
    width: 12px;
    height: 12px;
    background: #fff;
    border: 1px solid #eee;
    transform: rotate(-135deg);
    border-top: 0;
    position: absolute;
    bottom: -7px;
    left: -8px;
    z-index: 2;
  }

  .mt-10 {
    margin-top: .5rem;
  }

  .group-list {
    width: 100%;
    background: #fff;
    overflow: hidden;
    border-bottom: 1px solid #eee;
  }

  .group-list li {
    padding: .5rem;
    background: #fff;
    width: 100%;
  }

  .c-left2 {
    float: left;
    width: 5rem;
    height: 5rem;
  }

  .c-right2 {
    text-align: left;
    float: left;
    margin-left: .5rem;
    width: calc(100% - 7rem);
  }

  .c-right2 .goods-name {
    font-size: .75rem;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .c-right2 .goods-guige {
    margin-top: .5rem;
  }

  .c-right2 .goods-guige span:first-child {
    font-size: .6rem;
    color: #999;
  }

  .c-right2 .goods-guige span:last-child {
    margin-left: .5rem;
    font-size: .75rem;
    color: #F74C4E;
  }

  .c-right2 .old-price {
    margin-top: .2rem;
    font-size: .6rem;
    color: #999;
  }

  .c-right2 .go-group {
    margin-top: .75rem;
    margin-left: 1.3rem;
    padding: .3rem .5rem;
    background-image: linear-gradient(-145deg, #FF4B4E 0%, #E93B3D 100%);
    border-radius: 100px;
    font-size: .65rem;
    color: #fff;
  }

  .zhuanqu-title {
    padding: .5rem 0;
    border-bottom: 1px solid #eee;
  }

  .zhuanqu-style2 {
    padding: .5rem;
    overflow: hidden;
    border-bottom: 1px solid #eee;
  }

  .my-style2 {
    width: 50%;
    float: left;
  }

  .zhuanqu-style2 .con1 {
    width: 50%;
    padding-top: .75rem;
    float: left;
  }

  .zhuanqu-style2 .con1 div:last-child {
    font-size: 1.1rem;
    color: #555;
    font-weight: bold;
    margin-top: .5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .one {
    border-bottom: 1px solid #eee;
  }

  .zhuanqu1 {
    width: 67%;
    height: 8rem;
    border-right: 1px solid #eee;
    float: left;
    clear: both;
    padding: 1.3rem .5rem 0;
    text-align: left;
  }

  .zhuanqu1 .con1 {
    float: left;
    width: 45%;
  }

  .zhuanqu1 .con1 {
    float: left;
    width: 45%;
  }

  .con1 div:first-child {
    font-size: .6rem;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .con1 div:nth-child(2) {
    font-size: .6rem;
    color: #999;
    margin-top: .1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .con1 div:last-child {
    font-size: .9rem;
    color: #555;
    font-weight: bold;
    margin-top: .5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .zhuanqu1 .img1 {
    width: 55%;
    float: left;
  }

  .zhuanqu2 {
    width: 33%;
    float: left;
    text-align: center;
    padding: .5rem;
  }

  .zhuanqu2 div:first-child {
    font-size: .7rem;
    color: #454545;
    font-weight: 600;
  }

  .zhuanqu2 div:nth-child(2) {
    font-size: .5rem;
    color: #999;
    margin-top: .1rem;
  }

  .zhuanqu2 div:last-child {
    width: 5rem;
    height: 5rem;
    margin-top: .5rem;
  }

  .zhuanqu3 {
    width: 33.33%;
    float: left;
    padding: .5rem;
    border-right: 1px solid #eee;
  }

  .zhuanqu3 div:first-child {
    font-size: .7rem;
    color: #454545;
    font-weight: 600;

  }

  .zhuanqu3 div:nth-child(2) {
    font-size: .5rem;
    color: #999;
    margin-top: .1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .zhuanqu3 div:last-child {
    width: 5rem;
    height: 5rem;
    margin-top: .5rem;
  }

  .one div:last-child {
    border-right: none;
  }

  .two li {
    width: 20%;
    /*height: 3.3rem;*/
    float: left;
    text-align: center;
    padding: .2rem 0;
  }

  .my-tab {
    padding: .5rem 0;
    overflow: hidden;
    text-align: center;
  }

  .my-tab li:first-child {
    /*float: left;*/
    display: inline-block;
    font-size: .65rem;
    color: #fff;
    background: #E93B3D;
    border-radius: .8rem 0 0 .8rem;
    padding: .5rem 1rem;
  }

  .my-tab li:last-child {
    /*float: left;*/
    display: inline-block;
    font-size: .65rem;
    color: #555;
    border: 1px solid #e7e7e7;
    padding: .5rem 1rem;
    border-radius: 0 .8rem .8rem 0;
  }

  .my-tab2 {
    padding: .5rem 0;
    overflow: hidden;
    text-align: center;
  }

  .my-tab2 li:first-child {
    /*float: left;*/
    display: inline-block;
    font-size: .65rem;
    color: #555;
    border: 1px solid #e7e7e7;
    border-radius: .8rem 0 0 .8rem;
    padding: .5rem 1rem;
  }

  .my-tab2 li:last-child {
    /*float: left;*/
    display: inline-block;
    font-size: .65rem;
    color: #fff;
    background: #E93B3D;
    padding: .5rem 1rem;
    border-radius: 0 .8rem .8rem 0;
  }

  .wntj-list {
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0px 4px;
    margin-bottom: .5rem;
  }

  .wntj-list li {
    background: #fff;
    padding: 12px;
    border-radius: 4px;
    width: calc(50% - 5px);
    height: 9.75rem;
    margin-top: 5px;
    position: relative;
  }

  .pro-img {
    width: 100%;
    height: 6.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .pro-img img {
    max-height: 100%;
    max-width: 100%;
  }

  .pro-desc {
    overflow: hidden;
    font-size: .7rem;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .price-wrap {
    margin-top: .5rem;
    display: flex;
  }

  .price-wrap .price1 {
    font-size: .7rem;
    color: #F74C4E;
  }
</style>
